<template>
	<view class="custom-checkbox" :class="[{'is-checked': isChecked}]" @click="toggle" :style="[labelStyle]">
		<input type="checkbox" :checked="isChecked" @change="onChange" />
		<text class="checkmark" :style="[circleStyle]"></text>
		<text class="serve-info">{{label}}</text>
	</view>
</template>

<script>
	import {
		backgroundColors
	} from 'chalk';
	export default {
		props: {
			value: Boolean,
			disabled: {
				type: Boolean,
				default: false
			},
			label: {
				type: String,
				default: ''
			},
			fontSize: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: ''
			},
			circleSize: {
				type: String,
				default: ''
			},
			circleColor: {
				type: String,
				default: ""
			}
		},
		computed: {
			isChecked: {
				get() {
					//console.log(this.value,'get-isChecked')
					return this.value;
				},
				set(val) {
					//console.log(val,'set-isChecked')
					this.$emit('input', val);
				}
			},
			labelStyle() {
				let styles = {}
				if (this.fontSize) {
					styles.fontSize = this.fontSize
				}
				if (this.color) {
					styles.color = this.color
				}
				return styles;
			},
			circleStyle() {
				let styles = {}
				if (this.circleSize) {
					styles.transform = this.circleSize
				}
				if (this.circleColor) {
					if (this.isChecked) {
						styles.backgroundColor = this.circleColor
					}
				}
				return styles;
			}
		},
		methods: {
			toggle() {

				if (!this.disabled) {
					this.isChecked = !this.isChecked;
					this.$emit('toggle', !this.isChecked);
				}
			},
			onChange(event) {

				this.$emit('change', event.target.checked);
			}
		}
	};
</script>

<style scoped lang="scss">
	.custom-checkbox {
		display: flex;
		align-items: center;
		position: relative;
		padding-left: 1rpx;
		margin-bottom: 0rpx;
		cursor: pointer;
		font-size: 32rpx;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		margin: 35rpx 0;
	}

	.custom-checkbox input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}

	.checkmark {
		position: absolute;
		top: 1rpx;
		margin-bottom: 0rpx;
		right: 0;
		height: 40rpx;
		width: 40rpx;
		/* background-color: #eee; */
		border: solid 1rpx #ddd;
		border-radius: 50%;
	}

	.custom-checkbox:hover input .checkmark {
		background-color: #ccc;
	}

	.custom-checkbox input:checked .checkmark {
		background-color: blue;
	}

	.checkmark:after {
		content: "";
		position: absolute;
		display: none;
	}

	.custom-checkbox input:checked .checkmark:after {
		display: block;
	}

	.custom-checkbox .checkmark:after {
		left: 13rpx;
		top: 6rpx;
		width: 12rpx;
		height: 19rpx;
		border: solid white;
		border-width: 0 5rpx 5rpx 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.is-checked .checkmark {
		background-color: blue;
		border: solid 0rpx #ddd;
	}

	.is-checked .checkmark:after {
		display: block;
	}

	.big-area {
		width: 160rpx;
		height: 220rpx;
		position: absolute;
		z-index: 10;
		top: -155rpx;
		left: -85rpx;
	}

	.checkbox-all {
		margin-top: 160rpx;
		margin-left: 63rpx;
	}
</style>